"use strict";

var $ = require("jquery"),
    angular = require("angular"),
    registerComponent = require("core/component_registrator"),
    DOMComponent = require("core/dom_component"),
    Widget = require("ui/widget/ui.widget"),
    config = require("core/config"),
    inflector = require("core/utils/inflector"),
    fx = require("animation/fx"),
    positionUtils = require("animation/position"),
    ValidationGroup = require("ui/validation_group");

require("integration/angular");

require("ui/text_box");
require("ui/popup");
require("ui/popover");
require("ui/data_grid");
require("ui/toolbar");
require("ui/box");
require("ui/scheduler");
require("ui/defer_rendering");
require("ui/slide_out_view");

fx.off = true;
var ignoreAngularBrowserDeferTimer = function(args) {
    return args.timerType === "timeouts" && (args.callback.toString().indexOf("delete pendingDeferIds[timeoutId];") > -1 || args.callback.toString().indexOf("delete F[c];e(a)}") > -1);
};

var initMarkup = function($markup, controller, context) {
    context.testApp = angular.module("testApp", ["dx"]);
    context.$fixtureElement = $("<div/>").attr("ng-app", "testApp").appendTo("#qunit-fixture");
    context.$container = context.$fixtureElement;
    context.$controller = $("<div></div>")
        .attr("ng-controller", "my-controller")
        .appendTo(context.$container);

    $markup.appendTo(context.$controller);
    context.testApp
        .factory('$exceptionHandler', function() {
            return function myExceptionHandler(exception, cause) {
                throw exception;
            };
        })
        .controller("my-controller", controller);

    angular.bootstrap(context.$container, ["testApp"]);
};

QUnit.module("Widgets with async templates", {
    beforeEach: function() {
        this.clock = sinon.useFakeTimers();

        this.originWrapActionsBeforeExecute = config().wrapActionsBeforeExecute;
        config({ wrapActionsBeforeExecute: true });
    },
    afterEach: function() {
        this.clock.restore();

        config({ wrapActionsBeforeExecute: this.originWrapActionsBeforeExecute });
    }
});

QUnit.test("dxPopup", function(assert) {
    var originalPositionSetup = positionUtils.setup;

    var contentHeight;

    positionUtils.setup = function($content, position) {
        contentHeight = $content.height();

        originalPositionSetup($content, position);
    };

    var $markup = $("\
        <div dx-popup='popupOptions'>\
            <div data-options='dxTemplate: { name: \"custom\" }' style='line-height: 18px'>\
		        {{VeryVeryVeryLongField.value1}}\
		        {{VeryVeryVeryLongField.value2}}\
            </div>\
        </div>\
    ");

    var controller = function($scope) {
        $scope.VeryVeryVeryLongField = {
            "value1": "short",
            "value2": "field"
        };

        $scope.popupOptions = {
            showTitle: false,
            animation: null,
            visible: true,
            contentTemplate: "custom",
            maxWidth: 150,
            height: undefined,
            fullScreen: false,
            position: { of: window, offset: '0 0' }
        };
    };

    initMarkup($markup, controller, this);

    this.clock.tick();

    assert.roughEqual($(".dx-popup-content").height(), 18, 0.5);
    assert.equal(contentHeight, $(".dx-popup-content").height());

    positionUtils.setup = originalPositionSetup;
});

QUnit.test("dxPopover", function(assert) {
    var $markup = $("\
        <a id=\"link1\">testLink</a>\
        <div id=\"popover\" dx-popover='popoverOptions'>\
            <div data-options='dxTemplate: { name: \"content\" }' style='line-height: 18px'>\
                {{popoverContent}} {{popoverContent}}\
            </div>\
        </div>\
    ");

    var controller = function($scope) {
        $scope.popoverOptions = {
            target: "#link1",
            animation: null,
            width: 100,
            height: undefined,
            position: { at: "right top", my: "left top" },
            visible: true
        };
        $scope.popoverContent = "1";
    };

    initMarkup($markup, controller, this);

    this.clock.tick();

    assert.roughEqual($(".dx-popup-content").height(), 18, 0.5);
});

QUnit.test("dxDataGrid", function(assert) {
    var $markup = $("\
        <div dx-data-grid='dataGridOptions' dx-item-alias='alias'></div>\
        <script id='gridRow' type='text/html'>\
            <tbody>\
                <tr>\
                    <td>{{alias.data.Column1}}</td>\
                    <td>{{alias.data.Column2}}</td>\
                </tr>\
            </tbody>\
        </script>\
    ");

    var controller = function($scope) {
        $scope.dataGridOptions = {
            dataSource: [{
                "Column1": "Value1",
                "Column2": "Value2"
            }],
            width: 200,
            rowTemplate: $("#gridRow"),
            columnAutoWidth: true,
            columns: [ "Column1", "Column2" ]
        };
    };

    initMarkup($markup, controller, this);

    this.clock.tick(30);

    var $cols = $(".dx-datagrid-rowsview col");
    assert.equal($cols[0].style.width, "100px");
    assert.equal($cols[1].style.width, "100px");
});

QUnit.test("dxDataGrid - search with row template should highlight data without template (T539633)", function(assert) {
    var $markup = $(
        "<div dx-data-grid=\"gridOptions\" dx-item-alias=\"employee\"></div>\
        <script id=\"gridRow\" type=\"text/html\">\
            <tbody>\
                <tr>\
                    <td class=\"mycell\">{{employee.data.column1}}</td>\
                </tr>\
            </tbody>\
        </script>"
    );
    var controller = function($scope) {
        $scope.gridOptions = {
            dataSource: [{
                column1: "text.1"
            }, {
                column1: "text.2"
            }],
            rowTemplate: $("#gridRow"),
            searchPanel: { visible: true }
        };
    };

    initMarkup($markup, controller, this);
    this.clock.tick(30);

    assert.equal($($(".mycell")[0]).text(), "text.1");

    $(".dx-datagrid-search-panel").dxTextBox("instance").option("value", ".");
    this.clock.tick();

    assert.equal($($(".mycell")[0]).text(), "text.1");
});

QUnit.test("dxDataGrid - highlight timer was cleared on disposing (T539633)", function(assert) {
    assert.expect(0);
    this.clock.restore();

    var $markup = $(
        "<div dx-data-grid=\"gridOptions\" dx-item-alias=\"employee\"></div>\
        <script id=\"gridRow\" type=\"text/html\">\
            <tbody>\
                <tr>\
                    <td class=\"mycell\">{{employee.data.column1}}</td>\
                </tr>\
            </tbody>\
        </script>"
    );
    var controller = function($scope) {
        $scope.gridOptions = {
            dataSource: [{ column1: "text.1" }],
            rowTemplate: $("#gridRow")
        };
    };

    initMarkup($markup, controller, this);
});

QUnit.module("dxDataGrid", {
    beforeEach: function() {
        QUnit.timerIgnoringCheckers.register(ignoreAngularBrowserDeferTimer);
        this.clock = sinon.useFakeTimers();
    },
    afterEach: function() {
        QUnit.timerIgnoringCheckers.unregister(ignoreAngularBrowserDeferTimer);
        this.clock.restore();
    }
});

function calcWatchersCount(element) {
    var root = angular.element(element || document.getElementsByTagName('body'));

    var watchers = [];

    var f = function(element) {
        angular.forEach(['$scope', '$isolateScope'], function(scopeProperty) {
            if(element.data() && element.data().hasOwnProperty(scopeProperty)) {
                angular.forEach(element.data()[scopeProperty].$$watchers, function(watcher) {
                    watchers.push(watcher);
                });
            }
        });

        angular.forEach(element.children(), function(childElement) {
            f(angular.element(childElement));
        });
    };

    f(root);

    return watchers.length;
}

QUnit.test("Two-way binding", function(assert) {
    var initialWatchersCount = 1; // NOTE: One uncleared watcher created for dxDigestCallbacks service

    var $markup = $("<div dx-data-grid=\"gridOptions\"></div>");

    var controller = function($scope) {
        $scope.gridOptions = {
            dataSource: [
                { field1: 1, field2: 2 },
                { field1: 3, field2: 4 }
            ]
        };
    };

    initMarkup($markup, controller, this);

    var scope = $markup.scope();

    this.clock.tick(30);

    var $rows = $markup.find(".dx-data-row");
    assert.equal($rows.length, 2, "row count");
    assert.equal($rows.eq(0).children().eq(0).text(), "1");
    assert.equal($rows.eq(1).children().eq(0).text(), "3");

    //act
    scope.$apply(function() {
        scope.gridOptions.dataSource[0].field1 = 666;
    });

    //assert
    $rows = $markup.find(".dx-data-row");
    assert.equal($rows.length, 2, "row count");
    assert.equal($rows.eq(0).children().eq(0).text(), "666");
    assert.equal($rows.eq(1).children().eq(0).text(), "3");
    assert.equal(calcWatchersCount(), initialWatchersCount + 2, "watchers count");
});

//T285727
QUnit.test("Two-way binding when columnFixing", function(assert) {
    var initialWatchersCount = 1; // NOTE: One uncleared watcher created for dxDigestCallbacks service

    var $markup = $("<div dx-data-grid=\"gridOptions\"></div>");
    var controller = function($scope) {
        $scope.gridOptions = {
            columns: [{ dataField: "field1", fixed: true }, "field2"],
            dataSource: [
                { field1: 1, field2: 2 },
                { field1: 3, field2: 4 }
            ]
        };
    };

    initMarkup($markup, controller, this);

    var scope = $markup.scope();

    this.clock.tick(30);

    var $rows = $markup.find(".dx-datagrid-content-fixed .dx-data-row");
    assert.equal($rows.length, 2, "row count");
    assert.equal($rows.eq(0).children().eq(0).text(), "1");
    assert.equal($rows.eq(1).children().eq(0).text(), "3");

    //act
    scope.$apply(function() {
        scope.gridOptions.dataSource[0].field1 = 666;
    });

    //assert
    $rows = $markup.find(".dx-datagrid-content-fixed .dx-data-row");
    assert.equal($rows.length, 2, "row count");
    assert.equal($rows.eq(0).children().eq(0).text(), "666");
    assert.equal($rows.eq(1).children().eq(0).text(), "3");
    assert.equal(calcWatchersCount(), initialWatchersCount + 2, "watchers count");
});

//T352960
QUnit.test("Two-way binding does not work for inserted rows", function(assert) {
    var initialWatchersCount = 1; // NOTE: One uncleared watcher created for dxDigestCallbacks service

    var $markup = $("<div dx-data-grid=\"gridOptions\"></div>");
    var controller = function($scope) {
        $scope.gridOptions = {
            onInitialized: function(e) {
                $scope.grid = e.component;
            },
            columns: ["field1", "field2"],
            dataSource: [
                { field1: 1, field2: 2 },
                { field1: 3, field2: 4 }
            ]
        };
    };

    initMarkup($markup, controller, this);

    var scope = $markup.scope();

    this.clock.tick(30);

    //act
    scope.$apply(function() {
        scope.grid.addRow();
    });

    //assert
    var $rows = $markup.find(".dx-data-row");
    assert.equal($rows.length, 3, "row count");
    assert.equal(calcWatchersCount(), initialWatchersCount + 2, "watchers count. Inserted row is ignored");
});

    //T429370
QUnit.test("Assign selectedRowKeys option via binding", function(assert) {
    var $markup = $("<div dx-data-grid=\"gridOptions\"></div>");

    var controller = function($scope) {
        $scope.gridOptions = {
            bindingOptions: {
                "selectedRowKeys": "selectedRowKeys"
            },
            columns: ["field1", "field2"],
            dataSource: {
                store: {
                    type: "array",
                    data: [
                    { field1: 1, field2: 2 },
                    { field1: 3, field2: 4 }
                    ],
                    key: ["field1", "field2"]
                }
            }
        };
    };

    initMarkup($markup, controller, this);

    var scope = $markup.scope();

    this.clock.tick(30);
    //act
    scope.$apply(function() {
        scope.selectedRowKeys = [{ field1: 1, field2: 2 }];
        scope.selectedRowKeysInstance = scope.selectedRowKeys;
    });

    //assert
    var $selectedRows = $markup.find(".dx-data-row.dx-selection");
    assert.equal($selectedRows.length, 1, "one row is selected");
    assert.notEqual(scope.selectedRowKeysInstance, scope.selectedRowKeys, "selectedRowKeys instance is not changed");
});

//T427432
QUnit.test("Change selection.mode option via binding and refresh", function(assert) {
    var $markup = $("<div id=\"grid\" dx-data-grid=\"gridOptions\"></div>");
    var controller = function($scope) {
        $scope.gridOptions = {
            onInitialized: function(e) {
                $scope.grid = e.component;
            },
            dataSource: [
                    { value: 1, text: "A" },
                    { value: 2, text: "B" },
                    { value: 3, text: "C" }
            ],
            loadingTimeout: undefined,
            bindingOptions: {
                'selection.mode': 'mode'
            },
            loadPanel: { showPane: false, enabled: false },
        };

        $scope.mode = 'multiple';
    };

    initMarkup($markup, controller, this);

    var scope = $markup.scope();

    this.clock.tick(30);


    //act
    $markup.find(".dx-data-row").eq(0).children().first().trigger("dxclick");

    this.clock.tick(30);


    scope.$apply(function() {
        scope.mode = "single";
        scope.grid.option("selection.mode", "single");
        scope.grid.refresh();
    });

    this.clock.tick(30);


    //assert
    assert.equal($markup.find(".dx-header-row").eq(0).children().length, 2, "two cells in header row");
    assert.equal($markup.find(".dx-data-row").eq(0).children().length, 2, "two cells in data row");
});


QUnit.module("Adaptive menu", {
    beforeEach: function() {
        QUnit.timerIgnoringCheckers.register(ignoreAngularBrowserDeferTimer);
    },
    afterEach: function() {
        QUnit.timerIgnoringCheckers.unregister(ignoreAngularBrowserDeferTimer);
    }
});

QUnit.test("Adaptive menu should support angular integration", function(assert) {
    var $markup = $("\
        <div dx-menu=\"menuOptions\"></div>\
        <div id=\"testDiv\" ng-bind=\"test\"></div>\
    ");

    var controller = function($scope) {
        $scope.test = "Test text 1";

        $scope.menuOptions = {
            adaptivityEnabled: true,
            items: [{ text: "item 1" }],
            onItemClick: function() {
                $scope.test = "Test text 2";
            }
        };
        assert.strictEqual($scope.selectedRowKeysInstance, $scope.selectedRowKeys, "selectedRowKeys instance is not changed");
    };

    initMarkup($markup, controller, this);

    var scope = $markup.scope();

    var $treeViewItem = $markup.find(".dx-treeview-item").eq(0);

    $treeViewItem.trigger("dxclick");

    assert.equal(scope.test, "Test text 2", "scope value is updated");
    assert.equal($("#testDiv").text(), "Test text 2", "test div is updated");
});

QUnit.test("Component can change itself options on init (T446364)", function(assert) {
    var data = ["Peter", "Mary", "John", "Sam", "Betty", "Joyce"];

    var $markup = $("<div dx-list=\"listOptions\"></div>");
    var controller = function($scope) {
        $scope.listOptions = {
            bindingOptions: {
                dataSource: 'vm.myData',
                selectedItems: 'vm.MyRows'
            },
            selectionMode: 'single'
        };

        var Test = (function() {
            function Test() {
                this.myRows = [];
                this.myData = [];
            }
            Object.defineProperty(Test.prototype, "MyRows", {
                get: function() { return this.myRows; },
                set: function(value) {
                    if(value && value.length > 0) {
                        this.myRows = value;
                    }
                },
                enumerable: true,
                configurable: true
            });
            return Test;
        }());

        $scope.vm = new Test();
        $scope.vm.myData = data;
    };

    initMarkup($markup, controller, this);

    var scope = $markup.scope();

    $markup.dxList("option", "selectedItems", [ "Betty" ]);

    assert.equal(scope.vm.MyRows[0], "Betty");
});


QUnit.module("toolbar", {
    beforeEach: function() {
        QUnit.timerIgnoringCheckers.register(ignoreAngularBrowserDeferTimer);
    },
    afterEach: function() {
        QUnit.timerIgnoringCheckers.unregister(ignoreAngularBrowserDeferTimer);
    }
});

QUnit.test("polymorph widget correctly renders nested widgets", function(assert) {
    var $markup = $("\
        <div dx-toolbar=\"{ items: items }\"></div>\
        <div ng-bind=\"test\"></div>\
    ");

    var controller = function($scope) {
        scope = $scope;

        $scope.disabled = false;

        $scope.items = [{
            widget: "dxButton",
            options: {
                bindingOptions: {
                    disabled: '$parent.disabled'
                }
            }
        }];
    };

    initMarkup($markup, controller, this);

    var scope = $markup.scope();

    scope.$apply(function() {
        scope.disabled = true;
    });
    assert.equal($markup.find(".dx-state-disabled").length, 1);
});

QUnit.test("dxPopup - bindingOptions for a title property should be worked", function(assert) {
    var $markup = $("\
        <div dx-popup=\"popupOptions\"></div>\
        <div ng-bind=\"test\"></div>\
    ");

    var controller = function($scope) {
        scope = $scope;
        $scope.titlePopup = "title";

        $scope.popupOptions = {
            visible: true,
            showTitle: true,
            bindingOptions: {
                title: "titlePopup"
            }
        };
    };

    initMarkup($markup, controller, this);

    var scope = $markup.scope();

    var done = assert.async();
    setTimeout(function() {
        scope.$apply(function() {
            scope.titlePopup = "new title";
        });

        assert.equal($.trim($(".dx-popup-title").text()), "new title");
        done();
    }, 0);
});


QUnit.module("box", {
    beforeEach: function() {
        QUnit.timerIgnoringCheckers.register(ignoreAngularBrowserDeferTimer);
    },
    afterEach: function() {
        QUnit.timerIgnoringCheckers.unregister(ignoreAngularBrowserDeferTimer);
    }
});

QUnit.test("innerBox with nested box item", function(assert) {
    var $markup = $("\
        <div dx-box=\"{}\">\
            <div data-options=\"dxItem: {baseSize: 272, ratio: 0, box: {direction: \'col\'}}\">\
                <div data-options=\"dxItem: {baseSize: \'auto\', ratio: 0}\"><h2>Box1</h2></div>\
            </div>\
        </div>\
    ");

    initMarkup($markup, function() {}, this);

    assert.equal($.trim($markup.text()), "Box1", "inner box rendered");
});


QUnit.module("tree view", {
    beforeEach: function() {
        QUnit.timerIgnoringCheckers.register(ignoreAngularBrowserDeferTimer);
    },
    afterEach: function() {
        QUnit.timerIgnoringCheckers.unregister(ignoreAngularBrowserDeferTimer);
    }
});

QUnit.test("tree view should not crash with complex ids", function(assert) {
    assert.expect(0);

    var $markup = $("\
        <div dx-tree-view='options' dx-item-alias='item'>\
            <div data-options='dxTemplate: { name: \"item\" }'>{{item.title}}</div>\
        </div>\
    ");

    var controller = function($scope) {
        $scope.data = [{
            uid: "33ad",
            title: "title",
            uidParent: null
        }];

        $scope.options = {
            keyExpr: "uid",
            parentIdExpr: "uidParent",
            dataStructure: "plain",
            bindingOptions: {
                items: "data"
            }
        };
    };

    initMarkup($markup, controller, this);
});


QUnit.module("dxScheduler", {
    beforeEach: function() {
        QUnit.timerIgnoringCheckers.register(ignoreAngularBrowserDeferTimer);
        this.clock = sinon.useFakeTimers();
    },
    afterEach: function() {
        QUnit.timerIgnoringCheckers.unregister(ignoreAngularBrowserDeferTimer);
        this.clock.restore();
    }
});

QUnit.test("Custom store with ISO8601 dates", function(assert) {
    var $markup = $("<div dx-scheduler=\"schedulerOptions\"></div>");

    var controller = function($scope) {
        $scope.schedulerOptions = {
            dataSource: {
                load: function() {
                    var d = $.Deferred();

                    setTimeout(function() {
                        d.resolve([{
                            "text": "Approve Personal Computer Upgrade Plan",
                            "startDate": "2015-05-26T18:30:00+01:00",
                            "endDate": "2015-05-26T18:30:00+01:00"
                        }]);
                    });
                    return d.promise();
                }
            },
            timeZone: "America/Los_Angeles",
            views: ['workWeek'],
            currentView: 'workWeek',
            currentDate: new Date(2015, 4, 25)
        };
    };

    initMarkup($markup, controller, this);

    //act
    this.clock.tick(0);

    assert.equal($markup.find(".dx-scheduler-appointment").length, 1, "appointment count");
});


QUnit.module("Widgets without model for template", {
    beforeEach: function() {
        this.clock = sinon.useFakeTimers();
        QUnit.timerIgnoringCheckers.register(ignoreAngularBrowserDeferTimer);
    },
    afterEach: function() {
        this.clock.restore();
        QUnit.timerIgnoringCheckers.unregister(ignoreAngularBrowserDeferTimer);
    }
});

var noModelWidgets = [
    {
        name: "dxDeferRendering",
        options: { renderWhen: $.Deferred().resolve().promise() }
    },
    {
        name: "dxPopup",
        options: { visible: true }
    },
    {
        name: "dxSlideOutView",
        options: {}
    }
];

noModelWidgets.forEach(function(widget) {
    QUnit.test(widget.name, function(assert) {
        var TestComponent = DOMComponent.inherit({
            _render: function() {
                return this.callBase.apply(this, arguments);
            },
            _optionChanged: function() {
                this._invalidate();
            },
            _getDefaultOptions: function() {
                return { text: "", array: [], obj: null };
            }
        });

        registerComponent("dxTest", TestComponent);

        var $markup = $("<div/>")
            .attr(inflector.dasherize(widget.name), "widgetOptions");

        // TODO: ng-bind?
        $("<div>")
            .attr("dx-test", "innerOptions")
            .addClass("inner-widget")
            .appendTo($markup);

        var controller = function($scope) {
            scope = $scope;

            $scope.modelIsReady = $.Deferred().resolve().promise();

            $scope.test = "Test text 1";

            $scope.widgetOptions = widget.options;
            $scope.innerOptions = {
                bindingOptions: {
                    text: "test"
                }
            };
        };

        initMarkup($markup, controller, this);

        var scope = $markup.scope();
        this.clock.tick(300);

        var instance = $(".inner-widget").dxTest("instance");

        instance.option("text", "Test text 2");

        assert.equal(scope.test, "Test text 2", "scope value is updated");
    });
});

QUnit.test("Scope for template with 'noModel' option is not destroyed after clean (T427115)", function(assert) {
    var TestContainer = Widget.inherit({
        _render: function() {
            var content = $("<div />")
                    .addClass("dx-content")
                    .appendTo(this.element());

            this.option("integrationOptions.templates")["template"].render({
                container: content,
                noModel: true
            });
        }
    });

    registerComponent("dxTestContainerNoModel", TestContainer);

    var $markup = $("\
        <div dx-test-container-no-model>\
            <div data-options='dxTemplate: { name: \"template\" }' class='outer-template'>\
            </div>\
        </div>\
    ");

    initMarkup($markup, function() {}, this);

    var instance = $markup.data("dxTestContainerNoModel"),
        scope = $markup.scope();

    assert.ok(scope.$root);

    instance.repaint();

    assert.ok(scope.$root);
});


QUnit.module("dxValidator", {
    beforeEach: function() {
        this.testApp = angular.module("testApp", ["dx"]);
        QUnit.timerIgnoringCheckers.register(ignoreAngularBrowserDeferTimer);
    },
    afterEach: function() {
        QUnit.timerIgnoringCheckers.unregister(ignoreAngularBrowserDeferTimer);
    }
});

QUnit.test("T183342 dxValidator should be created after any editors", function(assert) {
    var dxApp = angular.module('dx'),
        validatorDirective = $.grep(dxApp._invokeQueue, function(configObj) {
            return (configObj[1] === "directive") && (configObj[2][0] === "dxValidator");
        })[0],
        editorDirective = $.grep(dxApp._invokeQueue, function(configObj) {
            return (configObj[1] === "directive") && (configObj[2][0] === "dxTextBox");
        })[0],
        getPriority = function(configObj) {
            return configObj[2][1][3]().priority;
        };

    assert.ok(validatorDirective, "Validator directive should be registered");
    assert.ok(editorDirective, "Editor directive should be registered");
    assert.ok(getPriority(validatorDirective) > getPriority(editorDirective), "Validator's priority should be greater than Editor's priority (as they are executed in a reversed order");
});

QUnit.test("T228219 dxValidationSummary should be disposed properly", function(assert) {
    var $markup = $("\
        <div id='testGroup' dx-validation-group='{}'>\
            <div class='dx-field'>\
                <div class='dx-field-value'>\
                    <div dx-text-box='{ bindingOptions: { value: \"name\" } }'\
                        dx-validator='{ validationRules: [{ type: \"required\" }] }'>\
                    </div>\
                </div>\
            </div>\
            <div id='valSumm' dx-validation-summary='{ }'></div>\
        </div>\
    ");

    initMarkup($markup, function() {}, this);

    assert.ok(new ValidationGroup($markup));

    $markup.remove();

    assert.ok(true, "We should not fall on previous statement");
});
